<template>
  <!-- 物流冲账 -->
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins" class="is--card">
      <template #form="{ form }">
        <XForm
          :fieldList="fieldList"
          :formOption="optionsDataAll"
          :formData="form"
        >
        </XForm>
      </template>
      <template #toolbar_btns>
        <div class="w-full">
          <el-tabs
            v-model="activeName"
            @tab-change="handleStatusChange"
          >
            <el-tab-pane
              :label="item.label"
              :name="item.value"
              v-for="item in tabs"
              :key="item.value"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <VActionBar :actions="actions" />
      </template>
    </VTable>
    <DerivedCenter ref="DerivedCenterRef"></DerivedCenter>
  </VPage>
</template>
<script setup lang="jsx">
import XForm from "@/components/XForm/index.vue";
import DerivedCenter from "@/components/DerivedCenter/index.vue";
import { config_name } from "@/config/export.js";
import { financeManageAuthList } from "@/Auth/finance-manage.js";
import { useEnumSelect } from "@/hooks";
import { logisticsList } from "@/api/index.js";
import { chargeBillsList } from "./api/index.js";
import { getTableSelectRow } from "@/hooks/tool.js";
import { emunData, changeLable } from "./index.js";
const activeName = ref(0);
const tableRef = ref();

const handleStatusChange = (val) => {
  activeName.value = val;
  refresh();
};
const refresh = () => {
  tableRef?.value.$table.commitProxy("query");
};
//导出
const DerivedCenterRef = ref();
const handleExport = async () => {
  let condition = getTableSelectRow(tableRef.value);
  DerivedCenterRef.value.open({
    tag_name: config_name["finance_manage"]["charge_bill"],
    condition,
  });
};
const tabs = computed(() => optionsData?.value["finance_charge_status"]);
const { options: optionsData } = useEnumSelect({
  params: ["finance_settle_type", "finance_charge_status"],
});
//获取物流商
const optionsData1 = ref({});
const getlogistics = () => {
  logisticsList({}).then((res) => {
    optionsData1.value.logistics = res?.data || [];
  });
};
getlogistics();
const optionsDataAll = computed(() =>
  Object.assign({}, optionsData.value, optionsData1.value)
);
const publicStyle = { style: { width: "240px" } };
const fieldList = [
  {
    field: "number",
    placeholder: "请输入",
    type: "input",
    select: [
      { label: "冲账单号", value: "charge_bill_number" },
      { label: "头程备库单号", value: "odd_number" },
      { label: "销售出库单号", value: "odd_number" },
      { label: "冲账人员", value: "charge_user" },
    ],
    selectStyle: { width: "130px" },
    ...publicStyle,
  },
  {
    field: "settle_type",
    type: "select",
    originOption: "finance_settle_type",
    options: {
      placeholder: "结算方式",
    },
    style: { width: "100px" },
  },
  {
    field: "logistics_id",
    type: "select",
    originOption: "logistics",
    options: {
      placeholder: "物流商名称",
      labelKey: "logistics_name",
      valueKey: "id",
    },
    class: "select-wrapper-style",
    collapseTags: true,
    multiple: true,
    ...publicStyle,
  },
  {
    field: "dateRange",
    type: "dateTimeRange",
    style: { width: "360px" },
    selectStyle: { width: "100px" },
    select: [{ label: "冲账时间", value: "charge_time" }],
    itemProps: {
      startPlaceholder: "添加最早时间",
      endPlaceholder: "添加最晚时间",
    },
  },
];
const tableOptins = reactive({
  formConfig: {
    data: {
      number: "",
      settle_type: "",
      logistics_id: [],
      dateRange: { type: "charge_time", value: [], range: false }, // 组合+日期范围
    },
  },
  tooltipConfig: {
    showAll: false,
  },
  isToggle: true,
  columns: [
    { fixed: "left", width: 50, type: "checkbox" },
    {
      fixed: "left",
      width: 170,
      title: "",
      field: "tracking_number",
      slots: {
        header: () => {
          return (
            <div>
              <div>冲账单号</div>
              <div>申请冲账时间</div>
            </div>
          );
        },
        default: ({ row }) => {
          return (
            <div>
              <div>{row?.charge_bill_number || "-"}</div>
              <div>{row?.request_time || "-"}</div>
            </div>
          );
        },
      },
    },
    {
      fixed: "left",
      title: "类型",
      minWidth: 150,
      field: "charge_type",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              {row?.charge_type == 1
                ? "头程冲账"
                : row?.charge_type == 2
                ? "尾程冲账"
                : ""}{" "}
            </div>
          );
        },
      },
    },
    {
      title: "",
      width: 200,
      field: "destination_country",
      slots: {
        header: () => {
          return (
            <div>
              <div>物流商</div>
              <div>结算类型 | 支付方式</div>
            </div>
          );
        },
        default: ({ row }) => {
          return (
            <div>
              <VText value={row?.logistics_info?.logistics_name}></VText>
              <div>
                {changeLable(
                  optionsData.value["finance_settle_type"],
                  row?.logistics_info?.settle_type
                )}{" "}
                | {emunData["pay_type"][row?.logistics_info?.pay_type] || "-"}
              </div>
            </div>
          );
        },
      },
    },
    {
      title: "单号（头程账单编号/尾程订单号）",
      width: 240,
      field: "odd_number",
    },
    { title: "订单金额", width: 160, field: "order_amount" },
    { title: "账单金额", width: 160, field: "billing_amount" },
    { title: "订单重量", width: 160, field: "order_weight" },
    { title: "账单计费重量", width: 160, field: "bill_billing_weight" },
    { title: "已付款总金额", width: 160, field: "total_paid_amount" },
    { title: "冲账金额", width: 160, field: "charge_amount" },
    {
      title: "冲账状态",
      width: 160,
      field: "",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              {changeLable(
                optionsData.value["finance_charge_status"],
                row?.charge_status
              )}
            </div>
          );
        },
      },
    },
    {
      title: "",
      width: 170,
      field: "channel_name",
      slots: {
        header: () => {
          return (
            <div>
              <div>冲账人员</div>
              <div>冲账时间</div>
            </div>
          );
        },
        default: ({ row }) => {
          return (
            <div>
              <div>{row?.charge_user || "-"}</div>
              <div>{row?.charge_time || "-"}</div>
            </div>
          );
        },
      },
    },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page, form }) => {
        form = {
          ...form,
          charge_status: activeName.value,
        };
        return chargeBillsList({ ...form, ...page }).then((res) => {
          return {
            data: res.data,
            total: res.total,
          };
        });
      },
    },
  },
});
const actions = [
  {
    label: "导出",
    dkicon: "icon-Upload",
    fn: handleExport,
    permission: [financeManageAuthList.strike_balance.export],
  },
];
</script>
